<template>
  <div>
    <div style="z-index:3;margin-bottom:10px;">
        <el-breadcrumb separator-class="el-icon-arrow-right title">
            <el-breadcrumb-item :to="{ path: '/' }" style="font-size:20px;">首页</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size:20px;">全部盲盒</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-row class="Recommend list-box" v-infinite-scroll="load" style="overflow:auto">
      <el-col v-for="item,index in blindBoxInfoList" :key="index" class="infinite-list-item" :span="8" :offset="0.75">
        <el-card style="width: 500px;height: 250px;margin-bottom:5px;margin-top:5px" v-show="blindBoxInfoListShow" shadow="hover">
          <div style="display: flex;flex-direction: row;">
            <el-image :src="item.blindBoxImage != null ? require('D:/毕设/前端/blind_box/src/assets/'+item.blindBoxImage):''" style="width: 200px;height: 200px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
              <div style="padding: 14px">
                盲盒名称：<span style="font-weight: 700">{{item.blindBoxName}}</span>
                <hr>
                盲盒价格：<span style="font-weight: 700">{{item.money}}￥</span>
                <hr>
                <div class="bottom clearfix info">
                  <span>盲盒信息：{{ item.blindBoxInfo }}</span>
                  <el-button type="text" class="button" @click="queryShoppingCartBlindBoxInfo(item.blindBoxId)">加入购物车</el-button>
                  <el-button type="text" class="button" @click="queryBuyBlindBoxInfo(item.blindBoxId)">购买盲盒</el-button>
                </div>
              </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 购买盲盒 -->
    <el-dialog title="购买盲盒确认" :visible.sync="buyBlindBoxDialog">
      <el-form :model="blindBoxInfo">
        <el-form-item label="盲盒名称：" prop="blindBoxName" style="font-weight: bolder;">
          <span>{{blindBoxInfo.blindBoxName}}</span>
        </el-form-item>
        <el-form-item label="购买数量：" prop="blindBoxName" style="font-weight: bolder;">
          <el-input v-model="blindBoxInfo.quantity" placeholder="请输入您要购买的数量"></el-input>
        </el-form-item>
        <span style="font-weight: 700" v-if="blindBoxInfo.quantity != null">盲盒总价：{{blindBoxInfo.money * blindBoxInfo.quantity}}￥</span>
        <span style="font-weight: 700" v-else-if="blindBoxInfo.quantity == null">盲盒总价：0￥</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="this.buyBlindBoxDialog == false">取消</el-button> -->
        <el-button type="primary" @click="buyBlindBox()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加购物车 -->
    <el-dialog title="添加购物车确认" :visible.sync="addShoppingCartDialog">
      <el-form :model="blindBoxInfo">
        <el-form-item label="盲盒名称：" prop="blindBoxName" style="font-weight: bolder;">
          <span>{{blindBoxInfo.blindBoxName}}</span>
        </el-form-item>
        <el-form-item label="添加数量：" prop="blindBoxName" style="font-weight: bolder;">
          <el-input v-model="blindBoxInfo.quantity" placeholder="请输入您要添加的数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="this.addShoppingCartDialog == false">取消</el-button> -->
        <el-button type="primary" @click="addShoppingCart()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      pageNum: 1,
      pageSize: 11,
      key: null,
      buyBlindBoxDialog: false,
      addShoppingCartDialog: false,
      blindBoxInfoListShow: false,
      blindBoxInfoList: [{
        blindBoxId : null,
        blindBoxName : null,
        blindBoxInfo : null,
        blindBoxImage : null,
        money : null,
        username : null,
        allSaleNum : null,
      }],
      blindBoxInfo:{
        blindBoxId : null,
        blindBoxName : null,
        money : 0,
        quantity : null,
      },
      saleBlindBoxInfoList:[{
        blindBoxId : null,
        quantity : null,
      }],
      shoppingCartInfo:{
        blindBoxId : null,
        quantity : null,
      }
    };
  },
  created(){
    var pageNum = 1
    var pageSize = 11
    var key = null
    this.$axios.get('/blindBox/queryBlindBox',{params:{key:key,pageNum:pageNum,pageSize:pageSize}})
    .then(res => {
      if(res.data.data != null){
        this.blindBoxInfoList = res.data.data.list
        this.blindBoxInfoListShow = true
      }
      // console.log(res)
    })
    .catch(err => {
      // console.error(err); 
    })
  },
  methods: {
    load() {
      this.pageNum += 1
      this.$axios.get('/blindBox/queryBlindBox',{params:{key:this.key,pageNum:this.pageNum,pageSize:this.pageSize}})
      .then(res => {
        if(this.pageNum <= res.data.data.pages){
          if(res.data.data != null){
            res.data.data.list.forEach(r=>{
              this.blindBoxInfoList.push(r)
            })
            console.log(this.blindBoxInfoList)
          }
        }else{
          this.$message({
            showClose: false,
            message: "已经没有更多盲盒了哦，期待商家商家更多盲盒吧",
            type: "warning"
          })
        }
        // console.log(res)
      })
      .catch(err => {
        // console.error(err); 
      })
    },
    queryBuyBlindBoxInfo(blindBoxId){
      this.buyBlindBoxDialog = true
      this.$axios.get('/blindBox/queryBlindBoxInfoById',{params:{blindBoxId:blindBoxId}})
      .then(res => {
        if(res.data.data != null){
          this.blindBoxInfo = res.data.data
          console.log(this.blindBoxInfo)
        }
        // console.log(res)
      })
      .catch(err => {
        // console.error(err); 
      })
    },
    queryShoppingCartBlindBoxInfo(blindBoxId){
      this.addShoppingCartDialog = true
      this.$axios.get('/blindBox/queryBlindBoxInfoById',{params:{blindBoxId:blindBoxId}})
      .then(res => {
        if(res.data.data != null){
          this.blindBoxInfo = res.data.data
          console.log(this.blindBoxInfo)
        }
        // console.log(res)
      })
      .catch(err => {
        // console.error(err); 
      })
    },
    addShoppingCart(){
      var token = localStorage.getItem("loginToken")
      this.shoppingCartInfo.blindBoxId = this.blindBoxInfo.blindBoxId
      this.shoppingCartInfo.quantity = this.blindBoxInfo.quantity
      if(this.shoppingCartInfo.quantity == null){
        this.$message({
          showClose: true,
          message: "添加数量为空",
          type: "warning"
        })
      }else {
        this.$axios.post('/shoppingCart/addShoppingCart',this.shoppingCartInfo,{headers:{"token": token}})
        .then(res=>{
          if(res.data.code == 200){
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success"
            })
          }
          if(res.data.code == 300){
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            })
          }
        })
      }
      this.addShoppingCartDialog = false
    },
    buyBlindBox(){
      var token = localStorage.getItem("loginToken")
      this.saleBlindBoxInfoList.forEach(s=>{
        s.blindBoxId = this.blindBoxInfo.blindBoxId
        s.quantity = this.blindBoxInfo.quantity
      })
      console.log(token)
      if(token == null){
        this.$message({
          showClose: true,
          message: "购买失败，还未登陆",
          type: "error"
        })
      }else{
        this.$axios.post('/buy/buyBlindBox',this.saleBlindBoxInfoList,{headers:{"token": token}})
        .then(res=>{
          if(res.data.msg == "余额不足"){
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            })
          }
          if (res.data.msg == "请登录后再尝试购买") {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            })
          }
          if (res.data.msg == "购买成功") {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success"
            })
          }
        })
      }
      this.buyBlindBoxDialog = false
    }
  },
};
</script>

<style  lang="less" scoped>
.Recommend {
  width: auto;
  height: 800px;
  border-radius: 10px;
  background-color: rgba(170, 170, 170, 0.144);
  overflow-y: scroll;
}
.info{
  display: flex; 
  flex-direction: column;
}
.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}
.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

.list-box::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 5px; // 滑块圆角
}

.list-box::-webkit-scrollbar-thumb:hover {
    background: rgb(80, 80, 80); // 鼠标移入滑块变色
}
body {
  margin: 0;
}
</style>
